<template>
  <div class="box">
    
    <van-sticky :offset-top="0">
      <div style="background-color: white">
        <div class="box1" style="padding-top: 2rem">
          <div class="sp1">
            <van-icon name="arrow-left" size="1.5rem" @click="router.go(-1)" />
          </div>
          <span style="font-size: 1.2rem">附近门店</span>
          <span>
            <van-icon name="search" size="2rem" />
          </span>
        </div>
        <p style="width: 90vw; margin: 0 auto; margin-top: 1rem">
          <button
            v-for="i in type.slice(0,4)"
            :key="i"
            :class="typer == i ? 'btn3' : 'btn4'"
            @click="upltype(i), getlist()"
          >
            {{ i }}
          </button>
          <button @click="showTop = true" class="btn1">
            更多
          </button>
        </p>
        <p style="width: 90vw; margin: 0 auto; margin-top: 1rem" v-if="typer != '全部'">
          <button
            v-for="i in typee"
            :key="i"
            :class="typeer == i ? 'btn3' : 'btn4'"
            @click="(typeer = i), getlistr()"
          >
            {{ i }}
          </button>

        </p>
      </div>
    </van-sticky>

    <nut-infinite-loading
      v-model="infinityValue"
      :has-more="hasMore"
      @load-more="loadMore"
    >
      <div class="box2" v-for="i in displayedSum" :key="i" @click="shopfrontinfo(i)">
        <div class="box3">
          <img
            src="https://tse2-mm.cn.bing.net/th/id/OIP-C.8InsvK94GQ2nhzRViLbJWAHaE8?w=278&h=185&c=7&r=0&o=5&dpr=1.3&pid=1.7"
            alt=""
          />
        </div>
        <div class="box4">
          <p style="font-weight: 600; font-size: 16px">
            {{ i.name.slice(0, 10) + '...' }}
          </p>
          <p
            style="
              margin-top: 0.5rem;
              font-size: 14px;
              color: rgb(126, 126, 126);
            "
          >
            {{ i.postton.slice(0, 20) + '...' }}
          </p>
          <p style="margin-top: 0.7rem">
            <span
              ><van-icon name="location" color="orange" />
              {{ i.gl + '公里' }}</span
            >
            <span style="margin-left: 0.8rem"
              ><van-icon name="star" color="orange" /> {{ i.pj }}</span
            >
          </p>
        </div>
      </div>
    </nut-infinite-loading>
    <van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }" >
      <p>
        <span>
        类型：
      </span>
        <button
            v-for="i in type"
            :key="i"
            :class="typer == i ? 'btn2' : 'btn1'"
            @click="(typer = i), getlist()"
          >
            {{ i }}
        </button>
      </p>
      <p style="margin-top: 0.5rem">
        <span >
        排序:
      </span>
        <button
            v-for="i in typee"
            :key="i"
            :class="typeer == i ? 'btn2' : 'btn1'"
            @click="(typeer = i), getlistr()"
          >
            {{ i }}
        </button>
      </p>
    </van-popup>
  </div>
</template>

<script setup>
import axios from 'axios';
import { reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const shopfrontinfo = (i) => {
  router.push({
    name: 'info',
    query: {
      data:JSON.stringify(i),
    },
  });
};
const list = reactive([]);
const type = reactive(['全部', '理发', '护发', '染发',"烫发",'发型设计']);
const typee = reactive(['评分', '公里', '评论数']);
const typer = ref('全部');
const typeer = ref("")
const showTop = ref(false)
const upltype = (i)=>{
  typer.value = i
  const item = type.filter(item => item.includes(typer.value));
  const itemr = type.filter(item => !item.includes(typer.value));
  type.length = 0
  type.push(...itemr)  
  type.splice(1,0,...item)
}
const getlist = () => {
    axios
      .get('http://localhost:3000/jsb/gettype?type=' + typer.value)
      .then((res) => {
        
        list.length = 0;
        list.push(...res.data.list);
        console.log('====================================');
        console.log(list);
        console.log('====================================');
        initializeData()
      });
};
onMounted(() => {
  getlist();
});
const getlistr = ()=>{
  // getlist()
if(typeer.value == "公里"){
    if(num.value == 1){
    displayedSum.value.sort((a,b)=>b.gl - a.gl)
    num.value = 2
  }else if(num.value == 2){
    num.value = 1
    displayedSum.value.sort((a,b)=>a.gl - b.gl)
  }
}
if(typeer.value == "评分"){
    if(num.value == 1){
    displayedSum.value.sort((a,b)=>b.pj - a.pj)
    num.value = 2
  }else if(num.value == 2){
    num.value = 1
    displayedSum.value.sort((a,b)=>a.pj - b.pj)
  }
}
if(typeer.value == "评论数"){
    if(num.value == 1){
    displayedSum.value.sort((a,b)=>b.pls - a.pls)
    num.value = 2
  }else if(num.value == 2){
    num.value = 1
    displayedSum.value.sort((a,b)=>a.pls - b.pls)
  }
}


}
const fetchMoreData = (start, count) => { 
  console.log(list);
  return list.slice(start,start+count)
}
// 初始化数据
const displayedSum = ref([])
const sum = ref([]) // 存储所有获取的数据
const infinityValue = ref(false)
const hasMore = ref(true)
const num = ref(1)
const loadedCount = ref(4) // 已加载的数据数量
const fetchCount = ref(1) // 每次加载的数量
// 初始化数据
const initializeData = () => {
  console.log('====================================');
  console.log('初始化数据');
  console.log('====================================');
  const initialData = fetchMoreData(0, loadedCount.value)
  sum.value = initialData
  displayedSum.value = initialData
  console.log(displayedSum.value);
}

// 加载更多数据的函数
const loadMore = (done) => {
  setTimeout(() => {
    const newData = fetchMoreData(loadedCount.value, fetchCount.value)
    if (newData.length === 0) {
      hasMore.value = false
    } else {
      sum.value = [...sum.value, ...newData]
      displayedSum.value = sum.value
      loadedCount.value += fetchCount.value
    }
    infinityValue.value = false
  }, 1000)
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100vw;
}
.box1 {
  width: 90vw;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .sp1 {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    text-align: center;
    border: 1px solid rgb(212, 212, 212);
    line-height: 3.3rem;
  }
}
.btn1 {
  margin-right: 0.8rem;
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: 10px;
  margin-top: 1rem;
}
.btn4 {
  margin-right: 1rem;
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: 10px;
}
.btn2 {
  margin-right: 0.8rem;
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: 10px;
  background-color: orange;
  margin-top: 1rem;
}
.btn3 {
  margin-right: 1rem;
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: 10px;
  background-color: orange;
}
.box2 {
  display: flex;
  width: 21rem;
  height: 8rem;
  margin: 2rem auto;
  justify-content: space-between;
  background-color: white;
}
.box3 {
  width: 30%;
  height: 80%;
  margin-top: 1.2rem;
  margin-left: 0.5rem;
  img {
    width: 100%;
    height: 80%;
    border-radius: 10px;
  }
}
.box4 {
  width: 60%;
  height: 80%;
  margin-top: 0.7rem;
}
.box11 {
  position: fixed;
  background-color: white;
  top: 0;
  left: 1rem;
  z-index: 999;
}
</style>